<template>
	<view>
		<u-navbar title="收益明细" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000" />
		
    	<view class="flex justify-between margin p-20 border-box bg-white b-r-10">
			<view>
				<view class="font-13 color-gray">报单服务商</view>
				<view class="font-20 font-b">{{ centerMoney }}</view>
			</view>
			<view class="p-l-10 p-r-10 b-r-10 timeBtn bg-white" @tap="showTime">{{timeRange?timeRange:'请选择'}}</view>
		</view>

		<view class="bg-white margin-lr padding margin-bottom radius-8 card-shadow" v-for="(item, index) in dataList" :key="index">
			<view class="flex justify-between font-15 text-bold">
				<view>报单审核</view>
				<view>+{{item.money}}</view>
			</view>
			<view class="line-h-50 color-gray m-t-10">
				<view>{{ item.nickName }}: {{item.mobile}}</view>
				<view>用户ID: {{item.userId}}</view>
				<!-- <view>报单数量: {{item.buyCount}}</view> -->
				<view>总金额: {{item.money}}</view>
				<view v-if="item.remark">备注: {{item.remark}}</view>
			</view>
			<view class="flex align-center justify-between margin-top-sm text-gray">
				<view>时间:{{ item.createTime }}</view>
				<view>余额:{{ item.lastMoney }}</view>
			</view>
		</view>
		<!-- 空数据 -->
        <empty :show="dataList.length == 0" />
		<!-- 暂无更多 -->
		<u-loadmore :status="status" color="gray" class="padding-bottom padding-top-xs"/>
		<!-- 日期 -->
		<u-calendar
			:allowSameDay="true"
			:maxDate="calendar.maxDate"
			:minDate="calendar.minDate"
			:show="timeRangeSelect" 
			mode="range" 
			@close="timeRangeSelect=false" 
			:monthNum="13" 
			showLunar 
			@confirm="timeChange" />
	</view>
</template>

<script>
  	import { getExpendList } from '@/common/api/serviceCenter.js'
	export default {
		data() {
			return {
				show: true,
				timeRange: null,
				timeRangeSelect: false,
				centerMoney: 0,
				calendar: {
					minDate:null,
					maxDate:null,
					defaultDate:null,
				},
				status: 'loading',
				pageNo: 0,
				dataList: [],
				beginTime: null,
				endTime: null,
			};
		},
		onShow(){
			this.getPayoutData()
			this.chooseTimed()
		},
		onReachBottom() {
			if(this.status !== 'nomore'){
				this.getPayoutData()
			}
		},
		methods: {
			chooseTimed() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (month <= 9) {
					month = '0' + month;
				}
				if (day <= 9) {
					day = '0' + day;
				}
				let minyear = year - 1;
				this.calendar.minDate = minyear + '-' + month + '-' + day;
				this.calendar.maxDate = year + '-' + month + '-' + day;
				this.calendar.defaultDate = year + '-' + month + '-' + day;
			},
			showTime(){
				this.timeRangeSelect = true
			},
			// 时间改了
			timeChange(e){
				if(e.length >=2){
					this.timeRangeSelect = false
					this.beginTime = e[0]
					this.endTime = e.at(-1)
					this.pageNo = 0
					this.timeRange = `${this.beginTime} ~ ${this.endTime}`
					this.getPayoutData()
				}
			},
			// 获取支出数据
			getPayoutData(){
				this.pageNo++;
				this.status = 'loading';
				let params = {
					pageNo: this.pageNo,
					pageSize: 10,
					state: 2,
					beginTime:this.beginTime,
					endTime:this.endTime
				}
				getExpendList(params).then(res => {
					if(res.code  == 200 ){
						if(this.pageNo === 1){
							this.dataList = res.data
						}else{
							this.dataList = this.dataList.concat(res.data)
						}
						if (res.data.length < 10) {
							this.status = 'nomore'
						}
						this.centerMoney = res.extend.centerMoney
					}
				})
			},
			// 重置数据
			resetData() {
				this.pageNo = 0
				this.dataList = []
			},
		}
	}
</script>

<style lang="scss" scoped>
page {
	background: #f2f2f2;
}
.timeBtn{
	margin-top: 3rpx;
	height: 70rpx;
	line-height: 70rpx;
	border: 1px solid #e3e3e3;
}
.head {
	.copy-btn {
		border: 2rpx solid #808080;
		color: #808080;
		font-size: 20rpx;
		padding: 2rpx 10rpx;
		margin-left: 20rpx;
		border-radius: 6rpx;
	}
}
.level {
	background: linear-gradient(-90deg, #FF9701 0%, #FFB21F 100%);
	color: #ffffff;
	font-size: 24rpx;
	padding: 2rpx 20rpx;
	border-radius: 6rpx;
	margin-left: 20rpx;
	min-width: 96rpx;
	text-align: center;
}
.tab-item {
	width: 50%;
	height: 64rpx;
	box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(250,49,33,0.24);
	color: #FA3121;
	font-size: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #FA3121;
	border-radius: 16rpx;
}
.tab-item-active {
	background: linear-gradient(42deg, #FF0804 0%, #FC7844 100%);
	color: #ffffff;
	border: none !important;
}
.card-shadow {
	box-shadow: 0px 2px 8px 1px rgba(47,78,123,0.04);
}
::v-deep .u-calendar-header__subtitle{
	display: none !important;
}
</style>
